<%@ page import="com.deepai.dprsmgr.utils.ErrCode" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="utf-8" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@include file="../base_path.jsp" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-cache"/>
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="description" content="">
    <link type="text/css" rel="stylesheet" media="screen"  href="<%=basePath%>/lib/element-ui/index.css"/>
    <%--    <link type="text/css" rel="stylesheet" media="screen" href="<%=basePath%>/lib/element-ui/icon.css"/>--%>
    <link rel="stylesheet" type="text/css" href="<%=basePath%>/lib/bootstrap/3.3.7/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" media="screen"
          href="<%=basePath%>/lib/jqgrid/5.2.1/css/ui.jqgrid-bootstrap.css"/>
    <link rel="stylesheet" type="text/css" media="screen" href="<%=basePath%>/lib/lobibox/css/lobibox.min.css"/>
    <link type="text/css" rel="stylesheet"
          href="<%=basePath%>/lib/bootstrap-switch/css/bootstrap3/bootstrap-switch.min.css"/>
    <link type="text/css" rel="stylesheet" href="<%=basePath%>/lib/bootstrap-select/css/bootstrap-select.min.css"/>
    <link rel="stylesheet" type="text/css" media="screen" href="<%=basePath%>/css/mycss.css"/>

    <title>工作时间</title>
    <style>
        .header-right {
            position: absolute;
            bottom: 16px;
            right: 0px;
            top: 0px;
        }

        #timeConfig .el-table {
            overflow: visible;
        }
        #timeConfig .el-table .cell{
            overflow: visible;
            font-size: 14px;
        }
        #timeConfig .el-table  .el-table__body-wrapper{
            overflow: visible;
        }
        #timeConfig  .el-table thead {
            background-color: #f3f5f7 !important;
            color: #000000;
        }
        #timeConfig .el-form{
            margin-bottom: 0;
        }
        #timeConfig .el-date-editor--daterange{
            width: 100%;
        }
        #timeConfig .el-table   .el-table__empty-block{
            height:inherit !important;
        }
        #timeConfig .el-form-item{
            margin-bottom:12px;
        }

        #timeConfig .el-table th.el-table__cell {
            background-color: #f3f5f7 !important;}

        #timeConfig  .el-table__header{
            background-color: #f3f5f7 !important;
        }
        #timeConfig .el-table thead  tr{
            background-color: #f3f5f7 !important;
        }
        #timeConfig .el-checkbox{
            margin-right: 6px;
        }
        #timeConfig    .el-select__tags span{
            display: flex;
            max-width: 200px;
            overflow: hidden;
        }
        .head-search.empty_input input {
            height: 34px;
            width: 240px;
            border: none;
            border-radius: 5px;
            padding-left: 10px;
            color: #757b84;
            font-size: 14px;
            background: transparent;
        }

        .head-search input {
            height: 34px;
            width: 206px;
            border: none;
            border-radius: 5px;
            padding-left: 10px;
            color: #757b84;
            font-size: 14px;
            background: transparent;
        }


        .empty_input .clear-btn {
            display: none;
        }

        /* popover样式 */
        .popover {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1060;
            display: none;
            max-width: 276px;
            padding: 1px;
            font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 1.42857143;
            text-align: left;
            text-align: start;
            text-decoration: none;
            text-shadow: none;
            text-transform: none;
            letter-spacing: normal;
            word-break: normal;
            word-spacing: normal;
            word-wrap: normal;
            white-space: normal;
            background-color: #fff;
            -webkit-background-clip: padding-box;
            background-clip: padding-box;
            border: 1px solid #6097fe;
            /* border: 1px solid rgba(0,0,0,.2); */
            border-radius: 6px;
            -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
            box-shadow: 0 5px 10px rgba(0,0,0,.2);
            line-break: auto;
            background:#6097fe;
        }

        .popover.left>.arrow:after {
            right: 1px;
            bottom: -10px;
            content: " ";
            border-right-width: 0;
            border-left-color: #6097fe;
        }

        .popover h5 {
            color: #FFF;
        }

    </style>
</head>
<body>
<div class="navbar-fixed-top">
    <div class="breadcrumb" style="margin-bottom: 0;">
        <span>呼入中心</span>/
        <span class="active">工作时间</span>
        <span class="pull-right" title="刷新">
            <div class="btn-refresh" onclick="location.replace(location.href);">
            	<img src="<%=basePath%>/images/refresh.png" >
            </div>
        </span>

    </div>
</div>

<div class="container-fluid" id="timeConfig">
    <div class="container-fluid-main">
        <div class="page-header" style=" display: flex">
            <h3>工作时间</h3>
            <el-popover
                    ref="popover1"
                    placement="top-start"

                    width="380"
                    trigger="hover"
            >
                <template slot="default">
                    <p>    常规工作时间：日常人工坐席可接入通话的工作时间。</p>
                    <p>  特殊工作时间：常规工作时间外，人工坐席也可接入通话的工作时间。（用于设置调休上班及咨询高峰期加班等情况）</p>
                    <p>      特殊非工作时间：工作时间范围内，人工坐席无法接入通话的时间。（用于设置在工作日的固定节假日等情况）</p>
                    <p>          *时间优先级：特殊非工作时间＞特殊工作时间＞常规工作时间</p>
                </template>
            </el-popover>
            <img style="height: 20px;width: 20px;font-size: 20px;background-size: 100%;margin-left: 12px" v-popover:popover1  src="<%=basePath%>/assets/brand/help.svg" />

        </div>

        <div>
            <%--常规工作时间--%>
            <div style="margin-bottom: 20px">
                <div style="display: flex;justify-content: space-between">
                    <h4>常规工作时间</h4>
                    <div >  <el-button  style="height:30px;display: flex;align-items: center" @click="add(3)" type="primary">+ 新增</el-button></div>
                </div>

                <el-table
                        :data="normalData"
                        border
                        empty-text="暂无数据"
                        style="width: 100%">
                    <el-table-column
                            prop="date"
                            label="队列名称"
                    >
                        <template slot-scope="scope">
                            <el-form :model="scope.row" :ref="'normalData'+scope.$index +'queueName'" :rule="rules"  >
                                <el-form-item
                                        prop="queueName" :rules="rules.queueName"
                                >
                                    <el-select
                                            v-model="scope.row.queueName"
                                            multiple
                                            collapse-tags
                                            placeholder="请选择队列名称">
                                        <el-option
                                                v-for="item in colNames"
                                                :key="item.text"
                                                :label="item.text"
                                                :value="item.text">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-form>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="星期"
                            width="420">
                        <template slot-scope="scope">
                            <el-form :model="scope.row" :ref="'normalData'+scope.$index+'weekDay'" >
                                <el-form-item
                                        prop="weekDay"
                                        :rules="[{type: 'array',required: true, message: '必填项', trigger: 'change' } ]"
                                >
                                    <el-checkbox-group v-model="scope.row.weekDay"  size="mini" @change="onchange" >
                                        <el-checkbox v-for="item in weekDay" :label="item.key" :key="item.key">{{item.text}}</el-checkbox>
                                    </el-checkbox-group>
                                </el-form-item>
                            </el-form  >

                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="address"
                            label="工作时间段(如08:00-18:00)">
                        <template slot-scope="scope">
                            <el-form :model="scope.row"  :ref="'normalData'+scope.$index+'startHour'" >
                                <el-form-item
                                        prop="startHour"
                                        :rules="[{required: true, message: '必填项', trigger: 'change' } ]"
                                >
                                    <el-input v-model="scope.row.startHour" placeholder="请输入工作时间段，多个以分隔符|区分" @input="oninput(scope.row.startHour)">

                                    </el-input>
                                </el-form-item>
                            </el-form  >


                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="120">
                        <template slot-scope="scope">
                            <el-button
                                    type="text"
                                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>

            </div >

            <%--特殊工作时间--%>
            <div style="margin-bottom: 20px">
                <div style="display: flex;justify-content: space-between">
                    <h4>特殊工作时间</h4>
                    <div >  <el-button  style="height:30px;display: flex;align-items: center" @click="add(2)" type="primary">+ 新增</el-button></div>
                </div>

                <el-table
                        :data="specialData"
                        border
                        empty-text="暂无数据"
                        style="width: 100%">
                    <el-table-column
                            prop="date"
                            label="队列名称"
                    >
                        <template slot-scope="scope">
                            <el-form :model="scope.row" :ref="'specialData'+scope.$index+'queueName'" >
                                <el-form-item
                                        prop="queueName"
                                        :rules="[{required: true, message: '必填项', trigger: 'change' } ]"
                                >
                                    <el-select
                                            v-model="scope.row.queueName"
                                            multiple
                                            collapse-tags
                                            placeholder="请选择队列名称">
                                        <el-option
                                                v-for="item in colNames"
                                                :key="item.text"
                                                :label="item.text"
                                                :value="item.text">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-form  >


                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="日期"
                            width="420"
                    >
                        <template slot-scope="scope">
                            <el-form :model="scope.row" :ref="'specialData'+scope.$index+'date'" >
                                <el-form-item
                                        prop="date"
                                        :rules="[{required: true, message: '必填项', trigger: 'change' } ]"
                                >
                                    <el-date-picker
                                            v-model="scope.row.date"
                                            type="daterange"
                                            range-separator="至"
                                            format="yyyy-MM-dd"
                                            value-format="yyyy-MM-dd"
                                            start-placeholder="开始日期"
                                            end-placeholder="结束日期">
                                    </el-date-picker>
                                </el-form-item>
                            </el-form  >

                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="address"
                            label="工作时间段(如08:00-18:00)">
                        <template slot-scope="scope">
                            <el-form :model="scope.row" :ref="'specialData'+scope.$index+'startHour'" >
                                <el-form-item
                                        prop="startHour"
                                        :rules="[{required: true, message: '必填项', trigger: 'change' } ]"
                                >
                                    <el-input v-model="scope.row.startHour" placeholder="请输入工作时间段，多个以分隔符|区分" @input="oninput(scope.row.startHour)">
                                    </el-input>
                                </el-form-item>
                            </el-form  >


                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="120">
                        <template slot-scope="scope">
                            <el-button
                                    type="text"
                                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <%--特殊非工作时间--%>
            <div style="margin-bottom: 20px">
                <div style="display: flex;justify-content: space-between">
                    <h4>特殊非工作时间</h4>
                    <div >
                        <el-button  style="height:30px;display: flex;align-items: center" @click="add(1)" type="primary">+ 新增</el-button></div>
                </div>

                <el-table
                        :data="specialNoWorkData"
                        border
                        empty-text="暂无数据"
                        style="width: 100%">
                    <el-table-column
                            prop="date"
                            label="队列名称"
                    >
                        <template slot-scope="scope">
                            <el-form :model="scope.row"  :ref="'specialNoWorkData'+scope.$index+'queueName'">
                                <el-form-item
                                        prop="queueName"
                                        :rules="[{required: true, message: '必填项', trigger: 'change' } ]"
                                >
                                    <el-select
                                            v-model="scope.row.queueName"
                                            multiple
                                            collapse-tags

                                            placeholder="请选择队列名称">
                                        <el-option
                                                v-for="item in colNames"
                                                :key="item.text"
                                                :label="item.text"
                                                :value="item.text">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-form  >
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="日期"
                            width="420"
                    >
                        <template slot-scope="scope">
                            <el-form :model="scope.row"  :ref="'specialNoWorkData'+scope.$index+'date'">
                                <el-form-item
                                        prop="date"
                                        :rules="[{required: true, message: '必填项', trigger: 'change' } ]"
                                >
                                    <el-date-picker
                                            v-model="scope.row.date"
                                            type="daterange"
                                            format="yyyy-MM-dd"
                                            value-format="yyyy-MM-dd"
                                            range-separator="至"
                                            start-placeholder="开始日期"
                                            end-placeholder="结束日期">
                                    </el-date-picker>
                                </el-form-item>
                            </el-form  >

                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="address"
                            label="非工作时间段(如00:00-23:59)">
                        <template slot-scope="scope">
                            <el-form :model="scope.row"  :ref="'specialNoWorkData'+scope.$index+'startHour'">
                                <el-form-item
                                        prop="startHour"
                                        :rules="[{required: true, message: '必填项', trigger: 'change' } ]"
                                >
                                    <el-input v-model="scope.row.startHour" placeholder="请输入工作时间段，多个以分隔符|区分" @input="oninput(scope.row.startHour)">

                                    </el-input>
                                </el-form-item>
                            </el-form  >


                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="120">
                        <template slot-scope="scope">
                            <el-button
                                    type="text"
                                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>

            </div>
        </div>

    </div>
    <el-button style="position: fixed;right: 5%;bottom:5%;z-index:1112" type="primary" @click="save">保存</el-button>

</div>

</div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="modal_create_business" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">

        </div>
    </div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>

<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="<%=basePath%>/lib/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/bootstrap/3.3.7/js/bootstrap.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/bootbox/bootbox.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/jqgrid/5.2.1/js/i18n/grid.locale-cn.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/jqgrid/5.2.1/js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/lobibox/js/lobibox.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/lobibox/js/messageboxes.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/lobibox/js/notifications.min.js"></script>
<!--请在下方写此页面业务相关的脚本-->
<link type="text/css" rel="stylesheet" href="<%=basePath%>/lib/bootstrap-select/css/bootstrap-select.min.css" />
<script type="text/javascript" src="<%=basePath%>/lib/bootstrap-switch/js/bootstrap-switch.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/bootstrap-select/js/bootstrap-select.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/bootstrap-select/js/i18n/defaults-zh_CN.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/jquery.validation/1.14.0/jquery.validate_1.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/jquery.validation/1.14.0/messages_zh.js"></script>
<script type="text/javascript" src="<%=basePath%>/js/common.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/vue/vue.min.js"></script>
<script src="<%=basePath%>/lib/element-ui/index.js"></script>

<!-- 引入样式 -->
<%--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">--%>
<!-- 引入组件库 -->
<%--<script src="https://unpkg.com/element-ui/lib/index.js"></script>--%>
<script type="text/javascript">
    var keyword = '';

    var s = new Date()


    const compareTimeInSameDay = (t1, t2) => {
        if(t2.split(":")[0]>23||t1.split(":")[0]>23){
            return false
        }
        if(t2.split(":")[1]>59||t1.split(":")[1]>59){
            return false
        }
        let d = new Date()
        let ft1 = d.setHours(t1.split(":")[0], t1.split(":")[1])
        let ft2 = d.setHours(t2.split(":")[0], t2.split(":")[1])


        return ft1 < ft2

    }

    var  key=[]
    $(function () {
        $.jgrid.defaults.responsive = true;
        $.jgrid.defaults.styleUI = "Bootstrap";
        // this.select=$('#select0')[0]
        // console.log(this.select)
        // this.colNames.forEach((res,index)=>{
        //     let option = document.createElement("option");
        //     $(option).val(res.key);
        //     $(option).text(res.text);
        //     // key.push(res.key)
        //     this.select.append(option)
        // })

    });
    var app = new Vue({
        el: '#timeConfig',
        data: {
            dialogVisible: false,
            rules: {queueName:[{required: true, message: '必填项',trigger:'change'  }]
            },
            //定义特殊时间格式
            specialData:[
                //     {
                //     queueName: ['sk_zrg'],
                //     weekday: ['1','2','3','4'],
                //     startHour: '08:00-18:00',
                //     date:['2023-05-24','2023-05-25'],
                //     startStamp:"",
                //     status:2
                // },
            ],
            specialNoWorkData:[
                //     {
                //     queueName: ['sk_zrg'],
                //     weekday: ['1','2','3','4'],
                //     startHour: '08:00-18:00',
                //     date:['2023-05-24','2023-05-25'],
                //     startStamp:"",
                //     status:1
                // },

            ],
            //定义正常时间格式
            normalData:[
                //     {
                //     queueName: ['sk_zrg'],
                //     weekday: ['1','2','3','4'],
                //     startHour: '08:00-18:00',
                //     status:3
                // },

            ],
            //定义日期
            weekDay: [
                {text:'一',key:'1'},
                {text:'二',key:'2'},
                {text:'三',key:'3'},
                {text:'四',key:'4'},
                {text:'五',key:'5'},
                {text:'六',key:'6'},
                {text:'日',key:'7'},
            ],
            colNames:[
            ],
            select:'',
            list:[]
        },
        created(){

        },
        mounted() {
            this.getLIst()
        },
        watch: {
        },
        methods: {
            handleClose(done) {
                alert('关闭')
            },
            //重置记录表
            getLIst(){
                $.ajax({
                    url: "<%=basePath%>/date/list.do",
                    type: "post",
                    async:true,
                    data: "",
                    dataType: "json",
                    success: function (data) {
                        app.specialData=[]
                        app.specialNoWorkData=[]
                        app.normalData=[]
                        data.dataList.forEach(res=>{

                            if(res.status==1){
                                app.specialNoWorkData.push({...res,queueName:res.queueName.split(','),date:[res.startStamp,res.endStamp]})
                            }
                            if(res.status==2){
                                app.specialData.push({...res,queueName:res.queueName.split(','),date:[res.startStamp,res.endStamp]})
                            }
                            if(res.status==3){
                                app.normalData.push({...res,queueName:res.queueName.split(','),
                                    weekDay:res.weekDay.split(','),
                                })


                            }

                        })

                    },
                    error: function (data) {
                        myNotify("error", "", "操作请求发送过程中发生错误，请尽快联系管理员！");
                    }
                });


            },
//删除单行
            handleDelete(index,row){
                const that=this
                // this.dialogVisible=true
                if(row.id){
                    deleteData(row)
                }else{
                    if(row.status==1){
                        this.specialNoWorkData.splice(index, 1);
                    }
                    if(row.status==2){
                        this.specialData.splice(index, 1);
                    } if(row.status==3){
                        this.normalData.splice(index, 1);
                    }
                }
                console.log(row)
            },
            onchange(row){
                console.log(row)
            },
            oninput(time){

            },
            checkInfo(info,index){
                return   info.every(item=>{
                        if( item.queueName==''){
                            myNotify("error", "", "队列名称" + "不能为空")
                            return false
                        }
                        if(index==3){
                            if( item.weekDay==''){
                                myNotify("error", "", "星期不能为空")
                                return false
                            }
                        }
                        else {
                            if( item.date==[]){
                                myNotify("error", "", "日期不能为空")
                                return false
                            }else {
                                item.startStamp=item.date[0]
                                item.endStamp=item.date[1]
                            }

                        }

                        if( item.startHour==''){
                            myNotify("error", "", "工作时间段不能为空")
                            return false
                        }
                        var regComment = /[^0-9\-:|]/g;
                        if(item.startHour.includes('—')){
                            item.startHour = item.startHour.replace("—", "-");
                        }
                        if(item.startHour.includes('|')){
                            let format= item.startHour.split('|')
                            return  format.every(res=>{
                                if(res.includes('-')&&res.length===11){
                                    let format2= res.split('-')
                                    if(!compareTimeInSameDay(format2[0],format2[1])){
                                        myNotify("error", "", "工作时间段格式有误，结束时间需大于开始时间且不能超过24点");
                                        return false
                                    }
                                    return  format2.every(re=>{
                                        if(re.includes(':')&&re.length===5){
                                            let format3=re.split(':')
                                            return  format3.every(r=>{
                                                if(r.length==2){
                                                    return  true
                                                }else{
                                                    myNotify("error", "", "工作时间段格式有误，请按照08:00-18:00格式填写");
                                                    return false
                                                }
                                            })
                                        }
                                        else  {
                                            return false
                                        }
                                    })

                                }
                                else {
                                    myNotify("error", "", "工作时间段格式有误，请按照08:00-18:00格式填写");
                                    return    false
                                }
                            })


                        }
                        else if(!item.startHour.includes('|') && item.startHour.length!==11){
                            myNotify("error", "", "工作时间段格式有误，请按照08:00-18:00格式填写");
                            return  false
                        }
                        else if(!item.startHour.includes('|')&& item.startHour.length==11){
                            let format= item.startHour.split('-')

//比较同一天的两个时间大小, 是否 t1 > t2。如 11:30 和 10:00, 返回true

                            if(!compareTimeInSameDay(format[0],format[1])){
                                myNotify("error", "", "工作时间段格式有误，结束时间需大于开始时间且不能大于等于24点");
                                return false
                            }
                            return   format.every(res=>{
                                if(res.includes(':')&&res.length===5){
                                    let format2=res.split(':')
                                    return     format2.every(re=>{
                                        if(re.length==2){

                                            // myNotify("success", "","正确")
                                            return  true
                                        }else{

                                            myNotify("error", "","工作时间段格式有误，请按照08:00-18:00格式填写")
                                            return false
                                        }
                                    })

                                }
                                else {

                                    myNotify("error", "","工作时间段格式有误，请按照08:00-18:00格式填写")
                                    return    false
                                }

                            })
                        }

                        if (regComment.test(item.startHour)){
                            myNotify("error", "", "工作时间段格式有误，请按照08:00-18:00格式填写");
                            return  false
                        }
                    }
                )
            },

            save(){
                if(!this.checkInfo(this.normalData,3)){
                    console.log(3333,!this.checkInfo(this.normalData,3))
                    // myNotify("error", "", "工作时间段格式有误，请按照08:00-18:00格式填写");
                    return
                }
                if(!this.checkInfo(this.specialData,2)){
                    console.log(2222,!this.checkInfo(this.specialData,2))
                    return
                }
                if(!this.checkInfo(this.specialNoWorkData,1)){
                    console.log(1111,!this.checkInfo(this.specialNoWorkData,1))
                    return
                }
                let that =this
                const data=[...this.normalData,...this.specialData,...this.specialNoWorkData]
                console.log('数据保存了')
                $.ajax({
                    url: "<%=basePath%>/date/updateWorkTimeInfo.do",
                    type: "post",
                    data: "tableData="+JSON.stringify(data),
                    dataType: "json",
                    success: function (data) {
                        that.getLIst()
                        myNotify("success", "", "保存成功");
                    },
                    error: function (data) {
                        myNotify("error", "", "操作请求发送过程中发生错误，请尽快联系管理员！");
                    }
                });
            },
            add(index){
                if(index===3){
                    this.normalData.push({
                        queueName: [],
                        weekDay: [],
                        startHour:"",
                        status:3
                    })

                    let num= this.normalData.length-1
                    let  value= 'normalData'+JSON.stringify(num)+'queueName'
                    let  value2= 'normalData'+JSON.stringify(num)+'weekDay'
                    let  value3= 'normalData'+JSON.stringify(num)+'startHour'
                    setTimeout(function () {
                        app.$refs[value].validate(valid=>{
                            return false;
                        })
                        app.$refs[value2].validate(valid=>{
                            return false;
                        })
                        app.$refs[value3].validate(valid=>{
                            return false;
                        })

                    },300)
                }
                if(index===2){
                    this.specialData.push({
                        queueName: [],
                        weekDay: [],
                        startHour:"",
                        startStamp :"",
                        endStamp:'',
                        date:[],
                        status:2
                    })
                    let num= this.specialData.length-1
                    let  value= 'specialData'+JSON.stringify(num)+'queueName'
                    let  value2= 'specialData'+JSON.stringify(num)+'startHour'
                    let  value3= 'specialData'+JSON.stringify(num)+'date'
                    setTimeout(function () {
                        app.$refs[value].validate(valid=>{
                            return false;
                        })
                        app.$refs[value2].validate(valid=>{
                            return false;
                        })
                        app.$refs[value3].validate(valid=>{
                            return false;
                        })

                    },300)
                    console.log(this.specialData)
                }
                if(index===1){
                    this.specialNoWorkData.push({
                        queueName: [],
                        weekDay: [],
                        startHour:"",
                        startStamp :"",
                        endStamp:'',
                        date:[],
                        status:1
                    })
                    let num= this.specialNoWorkData.length-1
                    let  value= 'specialNoWorkData'+JSON.stringify(num)+'queueName'
                    let  value2= 'specialNoWorkData'+JSON.stringify(num)+'startHour'
                    let  value3= 'specialNoWorkData'+JSON.stringify(num)+'date'
                    setTimeout(function () {
                        app.$refs[value].validate(valid=>{
                            return false;
                        })
                        app.$refs[value2].validate(valid=>{
                            return false;
                        })
                        app.$refs[value3].validate(valid=>{
                            return false;
                        })

                    },300)
                }
            }
        }
    })
    //VUE的数据在外面使用
    function list(){
        $.ajax({
            url: "<%=basePath%>/tiers/queueNameList.do",
            type: "post",
            async: false,
            data: "" ,
            dataType: "json",
            success: function (data) {
                app.colNames=data.map(res=>{
                    return{
                        text:res.queueName,
                        key:res.queue

                    }
                })
                console.log(app.colNames,'colNames')
            },
            error: function (data) {
                myNotify("error", "", "操作请求发送过程中发生错误，请尽快联系管理员！");
            }
        });

    }
    list()

    function deleteData(row) {

        app.$confirm('确定删除该时间吗?删除后内容将无法找回。', '', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            height:'200px',
            type: 'warning'
        }).then(() => {
            $.ajax({
                url: "<%=basePath%>/date/delete.do",
                type: "post",
                data: "id="+row.id,
                dataType: "json",
                success: function (data) {
                    app.getLIst()
                    myNotify("success", "", "删除成功");
                },
                error: function (data) {
                    myNotify("error", "", "操作请求发送过程中发生错误，请尽快联系管理员！");
                }
            });
            this.$message({
                type: 'success',
                message: '删除成功!'
            });
        }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消删除'
            });
        });

    }




</script>
</body>
</html>